<template>
	<view>
		<view class="index-content"  :style="{ paddingTop: iStatusBarHeight + 'px'}" style="padding-bottom: 20px;">
			<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500" style="margin-bottom: 20px;">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" class="radius"></image>
				</swiper-item>
			</swiper>
				
			<view :class="show1?'bangdan-box-header1':'bangdan-box-header2'">
				<view class="flex flex-wrap">
					<view class="basis-df padding-lg text-center" style="margin-top: -10px;"  @tap="tabSelect"  :data-id="index" v-for="(item,index) in tabList" id="mudamuda">{{item.name}}</view>
				</view>
			</view>
			
			
			<swiper :current="TabCur" @change="swiperChange" :style="{ height: tabHeight + 'px' }">
				<swiper-item v-for="(item,index) in tabList">
					<scroll-view :style="{ height: (tabHeight) + 'px' }" >
						<view class="bangdan-box">
							<view class="bangdan-block">
								<view class="flex flex-wrap index-box-item" v-for="(item, index) in list" :key="index">
									<view class="basis-xs">
										<view class="flex">
											<view class="flex-sub">
												<image :src="item.image1" style="width: 30px;height: 30px;"></image>
											</view>
											
											<view class="flex-twice">
												<view class="text-white" style="margin: 0 10px 0 5px;width:65px;"><span style="line-height: 15px;display: inline-block;">{{item.name}}</span></view>
											</view>
											
										</view>
									</view>
									
									<view class="flex">
										<view class="text-white" style="line-height: 35px;">
											<image :src="item.image2" style="width: 15px;height: 15px;">
											</image>
										</view>
									</view>
								
									<view class="basis-xs">
										<view class="bg-blue radius text-center" style="width: 30px;height: 20px;font-size: 12px;line-height: 20px;margin-top: 5px;margin-left: 10px;">{{item.status}}</view>
									</view>
									
									<view class="flex justify-end">
										<view class="bg-blue index-box-item-circle">23</view>
										<view class="text-white">:</view>
										<view class="bg-blue index-box-item-circle">23</view>
										<view class="text-white">:</view>
										<view class="bg-blue index-box-item-circle">59</view>
										<view class="text-white">:</view>
										<view class="bg-blue index-box-item-circle">59</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>	
				
					
			</swiper>	
		</view>
		
	</view>
</template>

<script>
	import {
		getConmentStyle
	} from '../../common/js/getWindowHeight.js'
	export default {
		data() {
			return {
				show1:true,
				cloudShow: false,
				TabCur: 0,
				tabHeight: undefined,
				tabList:[{
					id:1,
					name:'新增测评'
				},{
					id:2,
					name:'全部'
				}],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				},{
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				iStatusBarHeight:0,
				list:[],
				remenList: [{
						image1: '../../static/2-22.png',
						image2: '../../static/2-23.png',
						status: '预售',
						name: 'OMNI',
						time: '1704033261000',
						month: 12,
						day: 23,
						hour: 11,
						min: 20
				
					},
					{
						image1: '../../static/2-22.png',
						image2: '../../static/2-24.png',
						status: '预售',
						name: 'SILLY',
						time: '1704119661000',
						month: 12,
						day: 23,
						hour: 11,
						min: 20
					}, {
						image1: '../../static/2-25.png',
						image2: '../../static/2-24.png',
						status: '预售',
						name: 'MOBILE',
						time: '1704165381000',
						month: 12,
						day: 23,
						hour: 11,
						min: 20
					},
				],
				yuShouList: [{
						image1: '../../static/2-18.png',
						image2: '../../static/2-15.png',
						status: '预售',
						name: 'UMA REUM',
						time: '1704033261000'
					},
					{
						image1: '../../static/2-20.png',
						image2: '../../static/2-22.png',
						status: '预售',
						name: 'ACT',
						time: '1704119661000'
					}, {
						image1: '../../static/2-21.png',
						image2: '../../static/2-15.png',
						status: '预售',
						name: 'HAPPY',
						time: '1704165381000'
					},
				],
			}
		},
		onLoad() {
			this.list = this.remenList
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		onReady: function() {
			getConmentStyle("#mudamuda", true, this).then(res => {
				console.log(res, "+++++++++++")
				this.tabHeight = res - 20
				// that.tabHeight = res;
			})
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log(this.TabCur);
				if(this.TabCur == 0){
					this.show1 = true;
				} else if(this.TabCur == 1) {
					this.show1 = false;
				}
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			swiperChange(e) {
				this.TabCur = e.detail.current
				if (e.detail.current == 0) {
					console.log('正常');
					this.show1 = true;
					this.list = this.remenList
				}
				if (e.detail.current == 1) {
					console.log('过期');
					this.show1 = false;
					this.list = this.yuShouList
				}
			},
		}
	}
</script>

<style>
	.index-content {
		width: 100%;
		min-height: 100vh;
		background: #191e32;
		padding: 50rpx 20rpx;
	}
	.bangdan-box{
		margin: 0 auto;
		width: 98%;
		min-height: 200rpx;
		background: #263576;
		padding: 0 20rpx;
	}
	.bangdan-box-header1{
		width: 98%;height: 120rpx;margin: 0 auto;
		background: url(../../static/left.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
	}
	.bangdan-box-header2{
		width: 98%;height: 120rpx;margin: 0 auto;
		background: url(../../static/right.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 36rpx;
		font-weight: 600;
	}
	.bangdan-block{
		/* background-color: #222b42; */
		margin-top: -15px;
		padding-bottom: 20px;
	}

	.index-box-item {
		color: #fff;
		font-weight: 600;
		width: 100%;
		margin-top: 15px;
		height: 30px;
		line-height: 30px;
		margin-left: 12px;
	}
	
	.index-box-item-img1 {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: -20rpx;
		margin-right: 10rpx;
	}
	
	.index-box-item-img2 {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -10rpx;
		margin-left: 10rpx;
	}
	
	.index-box-item-button {
		margin: 0 auto;
		width: 60rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 22rpx;
		font-weight: 400;
		border-radius: 6rpx;
		background: #00C3FF;
		margin-top: 40rpx;
	}
	
	.index-box-item-button2 {
		margin: 0 auto;
		width: 60rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 40rpx;
	}
	
	.index-box-item-circle{
		background: url(../../static/20.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;color: #000;    width: 23px;
		height: 23px;
		line-height: 23px;
		text-align:center;
		margin-top: 5px;
	}
	

	.clear {
		clear: both;
	}
</style>
